import React, { useState, useEffect } from "react";

export default function Login() {
  // ---------------- 受控组件说明 ----------------
  // 受控组件：input 的 value 受 React state 控制，输入时可实时校验、联动、格式化。
  // 适合需要复杂交互、校验、联动的表单。
  // 优点：可以在 onChange 时实时拿到输入值，随时校验和处理。
  // 缺点：每次输入都触发 state 更新，代码稍多。
  // --------------------------------------------

  // 获取 URL 查询参数
  const searchParams = new URLSearchParams(
    typeof window !== "undefined" ? window.location.search : ""
  );
  const accountParam = searchParams.get("account") || "";
  const passwordParam = searchParams.get("password") || "";

  // 用 useState 定义表单数据
  const [form, setForm] = useState({
    account: "",
    password: "",
  });

  // 页面加载时将参数赋值给表单
  useEffect(() => {
    setForm({
      account: accountParam,
      password: passwordParam,
    });
  }, [accountParam, passwordParam]);

  // 受控表单处理
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    // 校验逻辑
    if (name === "account") {
      // 只允许中文
      if (!/^([\u4e00-\u9fa5]*)$/.test(value)) {
        alert("用户名只能输入中文");
        return;
      }
    }
    if (name === "password") {
      // 只允许小写英文
      if (!/^([a-z]*)$/.test(value)) {
        alert("密码只能输入小写英文");
        return;
      }
    }
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  return (
    <div
      style={{
        maxWidth: 820,
        margin: "40px auto",
        padding: 24,
        border: "1px solid #eee",
        borderRadius: 8,
      }}
    >
      {/* 受控组件与非受控组件区别说明 - 左右分栏布局 */}
      <div
        style={{
          display: "flex",
          gap: 32,
          background: "#f6f8fa",
          border: "1px solid #e0e0e0",
          borderRadius: 8,
          padding: 24,
          marginBottom: 32,
          fontSize: 15,
          color: "#333",
          lineHeight: 1.7,
          maxWidth: 900,
          marginLeft: "auto",
          marginRight: "auto",
          boxSizing: "border-box",
        }}
      >
        <div style={{ flex: 1, minWidth: 0 }}>
          <b style={{ fontSize: 17 }}>受控组件</b>
          <ul style={{ margin: "12px 0 0 20px", padding: 0 }}>
            <li>
              input 的 value 受 React state
              控制，输入时可实时校验、联动、格式化。
            </li>
            <li>适合需要复杂交互、校验、联动的表单。</li>
            <li>
              优点：可以在 <b>onChange</b> 时实时拿到输入值，随时校验和处理。
            </li>
            <li>缺点：每次输入都触发 state 更新，代码稍多。</li>
            <li style={{ color: "#666", marginTop: 8 }}>
              <b>校验时机：</b>可在输入时校验
            </li>
          </ul>
        </div>
        <div style={{ width: 1, background: "#e0e0e0", margin: "0 16px" }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <b style={{ fontSize: 17 }}>非受控组件</b>
          <ul style={{ margin: "12px 0 0 20px", padding: 0 }}>
            <li>input 的值由 DOM 自己管理，React 不追踪输入过程。</li>
            <li>只能在需要时（如提交）通过 ref 获取 input 的值。</li>
            <li>适合简单表单、只关心最终提交内容的场景。</li>
            <li>优点：性能高、代码简单。</li>
            <li>缺点：无法在输入时做实时校验、联动、格式化。</li>
            <li style={{ color: "#666", marginTop: 8 }}>
              <b>校验时机：</b>只能在提交时校验
            </li>
          </ul>
        </div>
      </div>
      {/* 受控表单与非受控表单左右布局 */}
      <div
        style={{
          display: "flex",
          gap: 32,
          maxWidth: 900,
          margin: "0 auto 0 auto",
          alignItems: "flex-start",
        }}
      >
        {/* 受控表单 */}
        <div
          style={{
            flex: 1,
            minWidth: 0,
            background: "#fff",
            border: "1px solid #e0e0e0",
            borderRadius: 8,
            padding: 24,
            boxSizing: "border-box",
          }}
        >
          <h3 style={{ marginTop: 0, textAlign: "center" }}>受控组件表单</h3>
          <form
            style={{ marginTop: 12 }}
            onSubmit={(e) => {
              e.preventDefault();
              // 受控组件：可以在 onChange 实时校验，也可以在提交时统一校验
              // 这里再次校验，防止用户绕过输入校验
              if (!/^([\u4e00-\u9fa5]+)$/.test(form.account)) {
                alert("用户名只能输入中文");
                return;
              }
              if (!/^([a-z]+)$/.test(form.password)) {
                alert("密码只能输入小写英文");
                return;
              }
              console.log(form);
              alert("（受控）登录成功" + JSON.stringify(form));
            }}
          >
            <div
              style={{
                marginBottom: 12,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <label
                htmlFor="username"
                style={{ minWidth: 70, textAlign: "right", marginRight: 8 }}
              >
                用户名：
              </label>
              <input
                id="username"
                name="account"
                type="text"
                style={{ flex: 1, padding: 6, minWidth: 0 }}
                value={form.account}
                onChange={handleChange}
              />
            </div>
            <div
              style={{
                marginBottom: 12,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <label
                htmlFor="password"
                style={{ minWidth: 70, textAlign: "right", marginRight: 8 }}
              >
                密码：
              </label>
              <input
                id="password"
                name="password"
                type="password"
                style={{ flex: 1, padding: 6, minWidth: 0 }}
                value={form.password}
                onChange={handleChange}
              />
            </div>
            <button type="submit" style={{ width: "100%", padding: 8 }}>
              登录
            </button>
          </form>
        </div>
        {/* 非受控表单 */}
        <div
          style={{
            flex: 1,
            minWidth: 0,
            background: "#fff",
            border: "1px solid #e0e0e0",
            borderRadius: 8,
            padding: 24,
            boxSizing: "border-box",
          }}
        >
          <h3 style={{ marginTop: 0, textAlign: "center" }}>非受控组件表单</h3>
          <UncontrolledLoginForm
            key={accountParam + passwordParam}
            account={accountParam}
            password={passwordParam}
          />
        </div>
      </div>
    </div>
  );
}

// 非受控组件实现
function UncontrolledLoginForm({
  account,
  password,
}: {
  account: string;
  password: string;
}) {
  const formRef = React.useRef<HTMLFormElement>(null);

  // ---------------- 非受控组件说明 ----------------
  // 非受控组件：input 的值由 DOM 自己管理，React 不追踪输入过程。
  // 只能在需要时（如提交）通过 ref 获取 input 的值。
  // 适合简单表单、只关心最终提交内容的场景。
  // 优点：性能高、代码简单。
  // 缺点：无法在输入时做实时校验、联动、格式化。
  // ----------------------------------------------

  React.useEffect(() => {
    if (formRef.current) {
      const accountInput = formRef.current.elements.namedItem(
        "account"
      ) as HTMLInputElement | null;
      const passwordInput = formRef.current.elements.namedItem(
        "password"
      ) as HTMLInputElement | null;
      if (accountInput) accountInput.value = account;
      if (passwordInput) passwordInput.value = password;
    }
  }, [account, password]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (formRef.current) {
      const formData = new FormData(formRef.current);
      const accountVal = formData.get("account") as string;
      const passwordVal = formData.get("password") as string;
      // 非受控组件：只能在提交时统一校验，无法在输入时实时校验
      if (!/^([\u4e00-\u9fa5]+)$/.test(accountVal)) {
        alert("用户名只能输入中文");
        return;
      }
      if (!/^([a-z]+)$/.test(passwordVal)) {
        alert("密码只能输入小写英文");
        return;
      }
      console.log({ account: accountVal, password: passwordVal });
      alert(
        "（非受控）登录成功\n账号：" + accountVal + "\n密码：" + passwordVal
      );
    }
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit} style={{ marginTop: 12 }}>
      <div
        style={{
          marginBottom: 12,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <label
          htmlFor="un_account"
          style={{ minWidth: 70, textAlign: "right", marginRight: 8 }}
        >
          用户名：
        </label>
        <input
          id="un_account"
          name="account"
          type="text"
          style={{ flex: 1, padding: 6, minWidth: 0 }}
        />
      </div>
      <div
        style={{
          marginBottom: 12,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <label
          htmlFor="un_password"
          style={{ minWidth: 70, textAlign: "right", marginRight: 8 }}
        >
          密码：
        </label>
        <input
          id="un_password"
          name="password"
          type="password"
          style={{ flex: 1, padding: 6, minWidth: 0 }}
        />
      </div>
      <button type="submit" style={{ width: "100%", padding: 8 }}>
        （非受控）登录
      </button>
    </form>
  );
}
